<%@page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/static/jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="/static/jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="/static/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<%--分页插件--%>
	<link href="/static/jquery/bs_pagination/jquery.bs_pagination.min.css" type="text/css" rel="stylesheet" />
	<script type="text/javascript" src="/static/jquery/bs_pagination/en.js"></script>
	<script type="text/javascript" src="/static/jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script>
	jQuery(function ($) {
		$("#creatQxBtn").click(function () {
			$("#createRoleModal").modal("show");
		});
		//添加功能
		$("#addRoleBtn").click(function () {
			$.ajax({
				url:"/qx/addQx.do",
				data:{
					code:$("#create-roleCode").val(),
					name:$("#create-roleName").val(),
					description:$("#create-describe").val()
				},
				success(data){
					if(data.success){
						//页面加载
						loadRole();
						$("div.modal:visible").modal("hide").find(":input").val("");
					}
					if(data.msg){
						alert(data.msg)
					}
				}
			})
		});

		//实现全选：该功能只在当前页有效:因为分页的原理是：在当前页，就只查当前页的结果，其他页的结果是没有的！
		$("#selectAll").click(function () {//
			$(":checkbox[name=roleChk]").prop("checked",this.checked);
		});
		$("#roleTbody").on("click",":checkbox[name=roleChk]",function () {
			$("#selectAll").prop("checked",$(":checkbox[name=roleChk]").size()==$(":checkbox[name=roleChk]:checked").size());
		});
		//删除功能：
		$("#delQxBtn").click(function () {
			$.ajax({
				url:"/qx/delQx.do?ids="+$(":checkbox[name=roleChk]:checked").map(function (value) {
					return this.value
				}).get().join(","),
				success(data){
					if(data.success){
						loadRole();
						$("#selectAll").prop("checked",false)//删除完后，全选按钮不显示
					}
					if(data.msg){
						alert(data.msg)
					}
				}
			})
		});

		//点击code进入detail
		$("#roleTbody").on("click","a[detail]",function () {
			location="/settings/qx/role/detail.html?id="+$(this).attr("detail");
		});

		//页面加载：并提供分页功能：
		//定义一个方法提供 有 分页功能的 页面加载，该方法是有参的：作用：提供分页技术中的翻页功能
		function loadRole(currentPage,rowsPerPage){
			$.ajax({
				url:"/qx/listQx.json",
				data:{
					currentPage:currentPage,//向后端传输数据：当前页的页码
					rowsPerPage:rowsPerPage //每页展示的记录行数
				},
				success(page){//后端传回一个page对象，该对象包含初始化分页的属性：以及每页需要展示的数据data
					//遍历当前页的数据并展示
					var arr = [];
					$(page.data).each(function (index) {//每页的数据page.data
						arr.push(`<tr class="`+(index%2==0?"active":"")+`">
					<td><input name="roleChk"  value="`+this.id+`" type="checkbox" /></td>
					<td>`+(index+1)+`</td>
					<td><a detail="`+this.id+`"  style="text-decoration: none;">`+(this.code||'')+`</a></td>
					<td>`+(this.name||'')+`</td>
					<td>`+(this.description||'')+`</td>
				</tr>`)
					});
					$("#roleTbody").html(arr.join(""));
					//初始化分页控件
					$("#page").bs_pagination({
						currentPage:page.currentPage,//当前页面
						rowsPerPage:page.rowsPerPage,//每页要展示的记录数
						maxRowsPerPage: page.maxRowsPerPage,//每页最多展示的记录数
						totalPages: page.totalPages,     // 总页数
						visiblePageLinks: page.visiblePageLinks, //展示分页的卡片数
						//翻页时要进行的操作：翻页的时候就是要加载获得的页面内容
						//当然翻页的时候：要传值：根据这两个值去进行当前页数据的获取：
						onChangePage:function(event,data){
							loadRole(data.currentPage,data.rowsPerPage)
						}

					});
				}
			})
		}
	loadRole();
	});
</script>


</head>
<body>

	<!-- 创建角色的模态窗口 -->
	<div class="modal fade" id="createRoleModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 80%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">新增角色</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-roleCode" class="col-sm-2 control-label">代码<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-roleCode" style="width: 200%;">
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-roleName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-roleName" style="width: 200%;">
							</div>
						</div>
						
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 65%;">
								<textarea class="form-control" rows="3" id="create-describe"></textarea>
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="addRoleBtn" type="button" class="btn btn-primary" >保存</button>
				</div>
			</div>
		</div>
	</div>
	
	
	<div>
		<div style="position: relative; left: 30px; top: -10px;">
			<div class="page-header">
				<h3>角色列表</h3>
			</div>
		</div>
	</div>
	<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px;">
		<div class="btn-group" style="position: relative; top: 18%;">
		  <button id="creatQxBtn" type="button" class="btn btn-primary" data-toggle="modal" ><span class="glyphicon glyphicon-plus"></span> 创建</button>
		  <button id="delQxBtn" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
		</div>
	</div>
	<div style="position: relative; left: 30px; top: 20px;">
		<table class="table table-hover">
			<thead>
				<tr style="color: #B3B3B3;">
					<td><input id="selectAll" type="checkbox" /></td>
					<td>序号</td>
					<td>代码</td>
					<td>名称</td>
					<td>描述</td>
				</tr>
			</thead>
			<tbody id="roleTbody">

				<%--<tr>
					<td><input type="checkbox" /></td>
					<td>2</td>
					<td><a href="detail.html" style="text-decoration: none;">002</a></td>
					<td>销售总监</td>
					<td>销售总监销售总监销售总监销售总监销售总监</td>
				</tr>
				<tr class="active">
					<td><input type="checkbox" /></td>
					<td>3</td>
					<td><a href="detail.html" style="text-decoration: none;">003</a></td>
					<td>市场总监</td>
					<td>市场总监市场总监市场总监市场总监</td>--%>
				</tr>
			</tbody>
		</table>
	</div>
	
	<div id="page" style="height: 50px; position: relative;top: 30px; left: 30px;">


	</div>
			
</body>
</html>